<template>
	<view class="Comment">
		<view class="head">
			<view class="avatar">
				<image
					:src="Comment.user.headPortrait || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
					mode="" class="image"></image>
			</view>
			<view class="right">
				<view class="name">
					<text class="user">{{Comment.user.nickname || ''}}</text>
					<text class="level">lv.5</text>
				</view>
				<view class="time">
					{{date}}
				</view>
			</view>
		</view>
		<view class="body">
			<view class="context">
				{{Comment.comContent}}
			</view>
			<view class="operate">
				<text class="item1" :class="Comment.userAgreeStatue ? 'cuIcon-appreciatefill zan' : 'cuIcon-appreciate'"
					@tap="likeClick()"></text>
				<text class="number item">{{Comment.agreeNum}}</text>
				<text class="cuIcon-forward item"></text>
				<text class="cuIcon-comment item" @tap="secondComment()"></text>
			</view>
			<view class="two_comment" v-if="Comment.secondComment.length != 0">
				<view class="c_item" v-for="(item,index) in Comment.secondComment" :key="index"
					v-if="index < showComment || displayIndex">
					<text class="user">{{item.user.nickname || ''}}</text>
					<text class="anwser" v-if="item.comContent.indexOf('&end')>-1">回复</text>
					<text class="user" v-if="item.comContent.indexOf('&end')>-1">{{item.comUser.nickname || ''}}</text>
					<text class="anwser">:</text>
					<uni-tag
						customStyle="font-size: 32.36rpx;font-weight:500;padding:0;border-radius:6px;margin:0;border-style:none;color:#000000;background-color:#00000000"
						:inverted="true" :text="item.comContent.split('&end')[0]" type="primary" @click="otherComment(item.user.userId)" />
					<!-- <text class="context2">{{item.comContent.split('&end')[0]}}</text> -->
					<view class="c_item2" v-for="(item1,index1) in item.secondComments" :key="index1"
						v-if="index1 < isShow || displayIndex">
						<text class="user">{{item1.user.nickname}}</text>
						<text class="anwser">回复</text>
						<text class="user">{{item1.comUser.nickname || ''}}</text>
						<text class="anwser">:</text>
						<text class="context2">{{item1.comContent}}</text>
					</view>
				</view>
				<view class="reply" @tap="exhibit()" v-if="commentsNum > 3">
					<text class="btn">共{{commentsNum}}条回复</text>
					<text class="btn2" :class="operate ? 'cuIcon-unfold' : 'cuIcon-fold'"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Comment",
		data() {
			return {
				displayIndex: false,
				operate: 1,
				isShow: 2,
				Comment: {}
			}
		},
		props: {
			comment: {
				type: Object,
				default () {
					return {}
				}
			},
			token: {
				type: String,
				default () {
					return ""
				}
			}
		},
		created() {
			this.Comment = this.comment
		},
		watch: {
			comment: {
				handler() {
					this.Comment = this.comment
				},
				deep: true
			}
		},
		computed: {
			showComment() {
				if (this.comment.secondComment.length != 0) {
					if (this.comment.secondComment.length == 1) {
						return true
					} else {
						if (this.comment.secondComment[0].secondComments.length == 0) {
							if (this.comment.secondComment[1].secondComments.length != 0) {
								this.isShow = 1
								return 2
							} else {
								this.isShow = 0
								return 3
							}
						} else {
							if (this.comment.secondComment[0].secondComments.length == 1) {
								this.isShow = 0
								return 2
							} else {
								return 1
							}
						}
					}
				}
			},
			commentsNum() {
				if (this.comment.secondComment != 0) {
					var num1 = this.comment.secondComment.length
					var num2 = 0
					for (var i = 0; i < num1; i++) {
						if (this.comment.secondComment[i].secondComments.length != 0) {
							num2 += this.comment.secondComment[i].secondComments.length
						}
					}
					const sum = num1 + num2
					return sum
				}
			},
			date() {
				var nowDate = +new Date();
				var noteDate = +new Date(this.comment.updateTime);
				var timeDiff = nowDate - noteDate;
				var min = 60 * 1000;
				var hour = min * 60;
				var day = hour * 24;
				var week = day * 7;
				var month = week * 4;
				var year = month * 12;
				var exceedDay = Math.floor(timeDiff / day);
				var exceedHour = Math.floor(timeDiff / hour);
				var exceedMin = Math.floor(timeDiff / min);
				var exceedyear = Math.floor(timeDiff / year);
				var exceedmonth = Math.floor(timeDiff / month);
				var strs = new Array()
				strs = this.comment.updateTime.split(/[- :]/)
				var year = parseInt(strs[0])
				var month = parseInt(strs[1])
				month = month >= 10 ? month : strs[1].substr(1, 1)
				var day = parseInt(strs[2])
				day = day >= 10 ? day : strs[2].substr(1, 1)
				var hour = parseInt(strs[3])
				hour = hour >= 10 ? hour : strs[3].substr(1, 1)
				var minute = strs[4]
				if (exceedyear < 100 && exceedyear > 0) {
					return year + '年' + month + '月' + day + '日';
				} else {
					if (exceedmonth < 12 && exceedmonth > 0) {
						return month + '月' + day + '日';
					} else {
						if (exceedDay < 30 && exceedDay > 0) {
							return month + '月' + day + '日';
						} else {
							if (exceedDay < 7 && exceedDay > 0) {
								return exceedDay + '天前';
							} else {
								if (exceedHour < 24 && exceedHour > 0) {
									return exceedHour + '小时前';
								} else {
									if (exceedMin == 0) {
										return '刚刚';
									} else {
										return exceedMin + '分钟前';
									}
								}
							}
						}
					}
				}
			}
		},
		methods: {
			exhibit() {
				if (this.operate) {
					this.operate = 0
					this.displayIndex = true
				} else {
					this.operate = 1
					this.displayIndex = false
				}
			},
			likeClick() {
				this.firstLike()
				if (this.Comment.userAgreeStatue) {
					this.Comment.userAgreeStatue = false
					this.Comment.agreeNum--
				} else {
					this.Comment.userAgreeStatue = true
					this.Comment.agreeNum++
				}
			},
			async firstLike() {
				const res = await this.$myRequest({
					url: '/commentAgree/insertCommentAgree',
					method: "POST",
					token: this.token,
					data: {
						firstId: this.Comment.firstId,
						inviId: this.Comment.inviId
					}
				})
				console.log(res)
			},
			// async cancelLike() {
			// 	const res = await this.$myRequest({
			// 		url: "/commentAgree/deleteCommentAgreeFromFirstComment/" + this.comment.firstId,
			// 		token: this.token
			// 	})
			// 	console.log(res)
			// },
			secondComment() {
				this.$emit('secondFocus', this.comment.userId, this.comment.firstId, this.comment.inviId)
			},
			otherComment(commentUser) {
				this.$emit('otherFocus', commentUser, this.comment.firstId, this.comment.inviId)
			}
		}
	}
</script>

<style scoped>
	text {
		line-height: 1.6;
	}

	.Comment {
		border-bottom: 1.81rpx solid #FFFFFF;
		padding: 18.18rpx;
	}

	.head {
		width: 100%;
		display: flex;
	}

	.avatar {
		flex: 1;
		width: 72.72rpx;
		height: 72.72rpx;
		margin: 0 0 18.18rpx 0;
	}

	.image {
		width: 72.72rpx;
		height: 72.72rpx;
		border-radius: 50%;
	}

	.right {
		flex: 6;
	}

	.name .level {
		padding-left: 18.18rpx;
		font-size: 21.81rpx;
		font-weight: 700;
		color: #62A7FF;
	}

	.user {
		color: #62A7FF;
		font-weight: 700;
		padding-right: 9.09rpx;
	}

	.time {
		padding-top: 9.09rpx;
		font-size: 21.81rpx;
		color: #AAAAAA;
	}

	.body {
		margin-left: 94.54rpx;
	}

	.context {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		margin-bottom: 18.18rpx;
	}

	.operate {
		margin-bottom: 18.18rpx;
		color: #808080;
	}

	.zan {
		color: #62A7FF;
	}

	.item1 {
		padding-right: 18.18rpx;
		font-size: 36.36rpx;
	}

	.item {
		padding-right: 36.36rpx;
		font-size: 36.36rpx;
	}

	.number {
		font-size: 21.81rpx;
	}

	.two_comment {
		background-color: rgba(255, 255, 255, 0.5);
		padding: 18.54rpx;
		border-radius: 14px;
	}

	.context2 {
		padding-left: 9.09rpx;
	}

	.c_item {
		margin-bottom: 9.09rpx;
	}

	.c_item2 {
		margin-top: 9.09rpx;
	}

	.reply {
		margin-top: 9.09rpx;
		position: relative;
		color: #62A7FF;
	}

	.btn {
		font-size: 21.81rpx;
		padding-right: 9.09rpx;
	}

	.btn2 {
		position: absolute;
		top: 6rpx;
	}

	.anwser {
		padding-right: 9.09rpx;
	}
</style>
